<template>
    <div>
        <VoSchemaForm :model="model" :schema="schema"></VoSchemaForm>
        <div>
            <pre>{{modelJson}}</pre>
        </div>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </div>
</template>

<script>
import CodeTpl from '@/views/md/sf/select.md';
export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            model: {},
            schema: {
                properties: {
                    name1: {
                        label: '属性',
                        widget: 'select',
                        enum: [
                            { label: '选项1', value: '1' },
                            { label: '选项2', value: '2' },
                            { label: '选项3', value: '3' },
                            { label: '选项4', value: '4' }
                        ],
                        ui: {
                            size: 'mini',
                            multiple: true,
                            clearable: true
                        }
                    },
                    name2: {
                        label: '异步选项',
                        widget: 'select',
                        enum: [],
                        asyncData(resolve) {
                            setTimeout(() => {
                                resolve([
                                    { label: '选项1', value: '1' },
                                    { label: '选项2', value: '2' },
                                    { label: '选项3', value: '3' },
                                    { label: '选项4', value: '4' }
                                ])
                            }, 2000)
                        },
                        ui: {
                            placeholder: '请选择'
                        }
                    },
                    name3: {
                        label: '展开时加载',
                        widget: 'select',
                        enum: [],
                        asyncData(resolve) {
                            setTimeout(() => {
                                resolve([
                                    { label: '选项1', value: '1' },
                                    { label: '选项2', value: '2' },
                                    { label: '选项3', value: '3' },
                                    { label: '选项4', value: '4' }
                                ])
                            }, 2000)
                        },
                        custom: {
                            visibleAsync: true
                        },
                        ui: {
                            placeholder: '请选择'
                        }
                    },
                    name4: {
                        label: '分组',
                        widget: 'select',
                        enum: [
                            {
                                label: '选项1',
                                value: '1',
                                options: [
                                    { label: '分支1', value: '1-1' },
                                    { label: '分支2', value: '1-2' },
                                    { label: '分支3', value: '1-3' }
                                ]
                            },
                            {
                                label: '选项2',
                                value: '2',
                                options: [
                                    { label: '下级1', value: '2-1' },
                                    { label: '下级2', value: '2-2' },
                                    { label: '下级3', value: '2-3' }
                                ]
                            },
                            { label: '选项3', value: '3' },
                            { label: '选项4', value: '4' }
                        ],
                        custom: {
                            groupKey: 'options'
                        },
                        ui: {
                            placeholder: '请选择'
                        }
                    },
                    name5: {
                        label: '远程搜索1',
                        widget: 'select',
                        enum: [],
                        ui: {
                            placeholder: '请选择',
                            filterable: true,
                            remote: true,
                            loading: false,
                            remoteMethod({ property }, query) {
                                property.ui.loading = true;
                                setTimeout(() => {
                                    property.enum = Array(10).fill('').map((e, i) => {
                                        return { label: `${query}${i + 1}`, value: `${query}${i + 1}` }
                                    })
                                    property.ui.loading = false;
                                }, 2000)
                            }
                        }
                    },
                    name6: {
                        label: '远程搜索2',
                        widget: 'select',
                        enum: [],
                        asyncData(resolve, props, query) {
                            if (!query) {
                                resolve([])
                            } else {
                                setTimeout(() => {
                                    const list = Array(10).fill('').map((e, i) => {
                                        return { label: `${query}${i + 1}`, value: `${query}${i + 1}` }
                                    })
                                    resolve(list)
                                }, 2000)
                            }
                        },
                        ui: {
                            placeholder: '请选择',
                            filterable: true,
                            remote: true
                        }
                    }
                },
                ui: {
                    labelWidth: 100
                },
                col: {
                    span: 12
                }
            }
        }
    },
    computed: {
        modelJson() {
            return JSON.stringify(this.model, null, 4)
        }
    }
}
</script>

<style>

</style>
